<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <div style="margin-top: 15px;">
            <el-button type="primary" @click="addCate">添加分类</el-button>   
        </div>
        <tree-table style="margin-top: 15px;" border :data="cateList" :columns="columns" show-index index-text="#" :selection-type="false" :expand-type="false">
            <template slot="isok" scope="scope">
                <i style="color:lightgreen;" v-if="scope.row.cate_del === false" class="el-icon-success"></i>
                <i style="color:red;" v-else class="el-icon-error"></i>
            </template>
            <template slot="order" scope="scope">
                <el-tag v-if="scope.row.level === 1" type="success">一级</el-tag>
                <el-tag v-else-if="scope.row.level === 2" type="danger">二级</el-tag>
                <el-tag v-else type="warning">三级</el-tag>
            </template>
            <template slot="opt" scope="scope" width="200px"> 
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
            </template>
        </tree-table>
        <el-pagination style="text-align: right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="param.page"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="param.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.cateList.length">
        </el-pagination>
    </el-card>
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisable" width="50%" @close="setCateDialogClose">
        <!-- 内容主题区 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="catename">
                <el-input v-model="addCateForm.catename"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <el-cascader
                    v-model="cascaderSelArr"
                    :options="parentCateList"
                    :props="cascaderPros"
                    @change="handleCascaderChange" clearable></el-cascader>
            </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisable = false">取 消</el-button>
            <el-button type="primary" @click="dialogAddUser = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'Cates',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
            param:{
                page:1,
                size:10
            },
            addCateDialogVisable:false,
            tableLoading: false,
            cateList: [],
            cascaderPros: { expandTrigger: 'hover', label: 'catename', value: 'id', children: 'children' },
            cascaderSelArr:[],
            addCateForm: {
                catename: '',
                pid: 0,
                level:0,
            },//添加分类的表单数据对象
            parentCateList:[],
            addCateFormRules: {
                catename: [{ required: true, message: '请输入分类名称', trigger: 'blur' }, {min:3,max:10 ,message:'分类名的长度在3-10之间',trigger:'blur'}]
            },
            columns: [
                {
                    label: '分类名称',
                    prop: 'catename',
                },
                {
                    label: '是否有效',
                    type: 'template',
                    template:'isok',
                },
                {
                    label: '排序',
                    type: 'template',
                    template:'order',
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt',
                    width:'180px'
                }
            ]
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getCateList()
    },
    mounted () {},
    methods: {
        getCateList() {
            this.tableLoading = true
            this.http.get('/cates/list',{params:this.param}).then((res) => {
                this.tableLoading = false
                if (res.data.code === 200) {
                    this.cateList = res.data.data
                }
            }).then((err) => {
                this.tableLoading = false
            })
        },
        handleCurrentChange(newPage){
            this.param.page = newPage
            this.getCateList()
        },
        handleSizeChange(newSize){
            this.param.size = newSize
            this.getCateList()
        },
        addCate() {
            this.getParentCateList()
            this.addCateDialogVisable = true
        },
        dialogAddUser() {
            this.$refs.addCateForm.validate(valid => {
                if (!valid) {
                    return;
                }
                //发请求
            })
        },
        setRightDialogClose() {
            
        },
        getParentCateList() {
            this.http.get('/cates/beforeThree').then((res) => {
                if (res.data.code === 200) {
                    this.parentCateList = res.data.data
                }
            }).catch((err) => {

            })
        },
        handleCascaderChange() {
            console.log(this.cascaderSelArr)
        },
        setCateDialogClose() {
            this.$refs.addCateFormRef.resetFields()
            self.cascaderSelArr = []
            this.addCateForm.level = 0
            this.addCateForm.pid = 0
        }
    }
}
</script>

<style scoped lang="scss"></style>
